 import {useEffect, useState} from "react";
import axios from "axios";
import {Sidebar, Sticky, Toast} from 'react-vant';
 import {useLocation, useNavigate} from "react-router-dom";
import  "../css/TypeListPage.css";
import Search from '../../sjc/components/Search'

export default function TypeList() {
    const [active, setActive] = useState(0);
    const [typeList, setTypeList] = useState([])
    const [typeSecondList, setTypeSecondList]= useState([])
    const navigate = useNavigate()
    const path = useLocation();





    const getTypeList = async () => {
        let {data: {list, code}} = await axios.get('/fxs/shopType')
        if (code === 200) {
            setTypeList(list)
            const secondList = list.map(item=>{
                return item.children
            })
            console.log(list)
            setTypeSecondList(secondList)
        }
    }
    const onTypeSearch=(a)=>{

       navigate('/search'+`?searchname=${a}`)
        console.log(path)

    }
    useEffect(() => {
        getTypeList()
    }, [])
    return (
        <div >
            <Sticky>
            <div style={{
                width: "100%",
                height: "8rem",
                backgroundColor: "#bfaa95",
                verticalAlign: "bottom",

                position: "relative"
            }}>
                <h2 style={{fontSize: '2rem', color: 'white', position: "absolute", bottom: "1rem", left: "1rem"}}>商品分类</h2>
            </div>
            </Sticky>

            <div style={{width: "100%", height: "calc(100vh - 14rem)",display: "flex",fontSize:'1rem',backgroundColor:'#f5f5f5',overflow:'hidden'}}>

                <Sidebar
                    value={active}
                    onChange={(v) => {
                        setActive(v);

                    }}
                    style={{width:'100%',fontSize:'1rem'}}
                >
                    {typeList.map(item=>{
                   return(
                       <Sidebar.Item contentStyle={{ backgroundColor: '#fff', width:'100%',height:'100%' }} title={item.name}>
                           {item.children.map(childrenItem=>{

                               return(
                                   <div style={{backgroundColor:'#e8e7e3',padding:'0.5rem',width:'100%',overflow:'scroll'}} key={childrenItem._id}>
                                       {childrenItem.name}
                                        <div style={{width:'100%',display:'flex',flexWrap:'wrap',justifyContent:'space-between',backgroundColor:'white',borderRadius:'1rem',marginTop:'0.5rem'}}>
                                            {childrenItem.children.map(childrenItem2=>{
                                                return(

                                                   <dl style={{width:'25%',textAlign:'center',margin:'0.5rem'}}
                                                       onClick={()=>onTypeSearch(childrenItem2.name)} key={childrenItem2._id}>
                                                       <dt style={{width:'100%',}}>
                                                           <img src={childrenItem2.path} alt="" style={{width:'8rem',height:'8rem'}}/>
                                                       </dt>
                                                       <dd>
                                                           {
                                                           childrenItem2.name
                                                           }
                                                       </dd>
                                                   </dl>

                                                )
                                            } )}
                                        </div>
                                   </div>
                               )
                           })}
                       </Sidebar.Item>
                        )
                    })}

                </Sidebar>

            </div>

            </div>


    )
}
